<template>
	<view>
		<scroll ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback"
		 @emptyclick="emptyClick">
			<stop isBack>
				<view slot="content">我的预约</view>
			</stop>
			<view class="mart3 bcf pad2">
				<view class="bdda mar3 pad5 pos-r c12 tac flcc" @tap="goto('/pages/ciming/book/form_customer_book')">
					<view class="fa fa-plus fa-2x"></view>
					<text>添加预约信息</text>
					<ripple></ripple>
				</view>
			</view>
			<view class="">
				<view class="pad3 bdbdo flrc pos-r mart3 bcf" 
				v-for="row in data" :key="log.id">
					<view class="flex1 lh2">
						<view class="flrc">
							<view>
								<status :item="row.status" classes="round3"></status>
							</view>
							<view class="fwb fs12 flex1 padl2">{{row.name}} {{row.phone}}</view>
							<view class="cu-btn line-red" v-show="row.status.locked != true" @tap="deleteIt(row.id)">
								删除
								<ripple></ripple>
							</view>
						</view>
						<view class="c12 fs8 mart2">{{row.tips}}</view>
						<view class="flrc c12 fs8 mart2">
							<view>预约时间：</view>
							<view class="flex1 tar">{{datetime(row.bookAt)}}</view>
						</view>
						<view class="flrc c12 fs8">
							<view>预约编码：</view>
							<view class="flex1 tar">{{row.sn}}</view>
						</view>
					</view>
				</view>
			</view>
			<loading :loading="myIsLoading"></loading>
		</scroll>
	</view>
</template>

<script>
	import List from '../../../assets/js/list.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins:[MescrollMixin],
		data() {
			let list = new List()
			return {
				list,
				data:[]
			}
		},
		methods: {
				reload() {
					this.showLoading()
					this.list.setData({
						_order: {
							id: "DESC"
						},
						_range:['my']
					}).reload()
				},
				deleteIt(id){
					this.$api.delete('/api/customerBooks/' + id ,{},res=>{
						this.reload()
					})
				}
		},
		mounted() {
			this.list.initMescroll(this).setUrl('/api/customerBooks').setData({
				_order: {
					id: "DESC"
				},
				_range:['my']
			}).setCbFunc(res => {
				this.data = res
				this.clearLoading()
			}).reload()
		},
		onLoad(option) {
			
		},
		onShow() {
			this.reload()
		}
	}
</script>

<style>

</style>
